<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item>
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部导航 -->
    <div class="tab">
      <!-- <router-link to="/home"> -->
        <i class="el-icon-arrow-left" style="font-size: 20px; font-weight: bold; color: #000;"></i>
      <!-- </router-link> -->
      <p style="font-size: 14px; font-weight: bold;margin-left: 20px;">导航图标</p>
    </div>
    <!-- 主体 -->
    <div class="content">
      <table>
        <!-- 表头 -->
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <!-- 每一项 -->
        <tr>
          <td>
            第一格
          </td>
          <td>第二格</td>
          <td>第三格</td>
          <td>第四格</td>
          <td>
            <button @click="setFlag">弹出遮罩层</button>
          </td>
        </tr>
      </table>
      <!-- 更换 -->
      <div class="zz" v-show="flag">
        <div class="set">
          <!-- 头部 -->
          <div class="setTop">
            <p style="color: #fff;">导航图标管理</p>
            <i class="el-icon-close" style="font-size: 20px;font-weight: bold;color: #fff;" @click="setclose"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      
    }
  },
  
  methods: {
    setFlag(){
      this.flag = true
    },
    setclose(){
      this.flag = false
    }
  }
}
</script>
<style scoped>


.setTop {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  background-color: #0790F5;
}

.set {
  font-size: 14px;
  width: 50%;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 60%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;

}

.zz {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.icon {
  width: 30px;
}

.tab {
  padding: 20px 40px;
  display: flex;
}

.content {
  width: 85%;
  margin: 40px auto;
  height: 100%;
}

.tabbtn {
  margin-left: 10px;
  margin-right: 10px;
  border: none;
  color: #0790F5;
  font-weight: bold;
  background-color: #fff;
}

table {
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 50px;
}

td {
  width: 150px;
  border: 1px solid #777777;
}

th {
  height: 50px;
  line-height: 50px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}
</style>